<template>
	<div class="all">
	  <div class="tit">
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
		</el-breadcrumb>
	  </div>
	  <div class="box">
		<el-alert
		  size="90%"
		  title="只允许为第三级分类设置相关参数"
		  type="warning"
		  show-icon
		  class="al"
		></el-alert>
		<div class="xuanze">
		  <div class="block">
			<span class="demonstration">选择商品分类：</span>
			<el-cascader v-model="value" :options="options" @change="handleChange">
				<template slot-scope="{ node, data }">
					<span>{{ data.cat_name }}</span>
					<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
				</template>
			</el-cascader>
		  </div>
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
		  <el-tab-pane label="动态参数" name="first">动态参数</el-tab-pane>
		  <el-tab-pane label="静态属性" name="second">静态属性</el-tab-pane>
		</el-tabs>
	  </div>
	</div>
</template>
  
<script>
  import classifyArgData from '../../src/utils/request.js'
  import ElementUI from "element-ui";
  export default {
	data() {
	  return {
		activeName: "second",
		   value: [],
		   options:[]
	  };
	},
	async created(){
		 let res = await this.$http.classifyArgData()
        //    console.log(res.data.data)
		   this.options=res.data.data
		   console.log(this.options);
	},
	methods:{
		//选项卡内容
	  handleClick(tab, event) {

	  },
	  //
	  handleChange(value) {
		 
		} 
	  }
	
  }
</script>
  
<style lang="scss">
  .al {
		margin-bottom: 12px;
  }
  .box {
		padding: 10px 20px;
		width: 1500px;
		height: 300px;
		border: 1px solid #ccc;
		margin-left: 14px;
		box-shadow: 0px 0px 7px #ccc;
  }
  .tit {
		color: rgb(78, 74, 74);
		font-size: 14px;
		padding: 10px 20px;
  }
</style>
  